<!DOCTYPE html>
<html>
<head>
	<link href="../resources/presentation.css" rel="stylesheet" type="text/css" />
	<link href="../resources/syntaxhighlighter.css" rel="stylesheet" type="text/css" />
	<script src="../resources/syntaxhighlighter.min.js" type="text/javascript"></script>

	<script src="http://code.jquery.com/jquery.js" type="text/javascript"></script>
	<script src="../../jsrender.js" type="text/javascript"></script>
</head>
<body>
<div class="nav"><a href="02_compiled-template.html">Prev</a> <a href="index.html">Index</a> <a href="04_data-array.html">Next</a></div>

<h3>JsRender: Compile template from string, and register as named template</h3>

<!--====== Container ======-->
<table><tbody id="details"></tbody></table>

<!--====== Script ======-->
<script type="text/javascript">

var person = {
	firstName: "Jeff"
};

// Compile from string, as named template
$.templates( "detailsTmpl", "<tr><td>{{>firstName}}</td></tr>" );

// Render to string
var html = $.render.detailsTmpl( person );

// Insert as HTML
$( "#details" ).html( html );

</script>

<!--================ End of Demo Section ================-->

<h4>Data:</h4>
<pre class="brush: js;">
var person = {
    firstName: "Jeff"
};
</pre>

<h4>Script:</h4>
<pre class="brush: js;">
// Compile as named template
$.templates( "detailsTmpl", "&lt;tr>&lt;td>{{>firstName}}&lt;/td>&lt;/tr>" );

// Render to string
var html = $.render.detailsTmpl( person );

// Insert as HTML
$( "#details" ).html( html );
</pre>
</body>
</html>

